/**
 * 用户查看自己的个人简介，分四个部分
 *      一、一张背景图片，中间有一张个人的头像
 *      二、用户信息
 *              用户名
 *              用户ID
 *              用户级别：比如 普通用户xxx
 *              用户类型：比如个人 xxx
 *     三、用户简介xxx
 *     四、修改按钮
 */

import React, {Component} from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  Dimensions,
  Button,
  Image,
  ScrollView,
  ActivityIndicator,
} from 'react-native';

import TopPicture from '../components/TopPicture';
import Line from '../components/Line';

import {showOtherInfo} from '../../api/index';

const {width} = Dimensions.get('window');

export default class ShowOtherInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      result: {},
      imgUri:
        'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D550/sign=936136dbbd119313d843ffb555380c10/9825bc315c6034a89efd4098c413495409237688.jpg',
    };
    // const type = parseInt(this.props.navigation.getParam('isCompany'));
    // const typeValue = type === 0 ? '个人' : '公司';
    // // console.log(typeValue);
    // this.isCompany = typeValue;
  }
  async getInfo() {
    let uid = this.props.navigation.getParam('uid');
    let responseJson = await showOtherInfo({uid: uid});
    if (
      responseJson.portraitkey === '' ||
      responseJson.portraitkey === null ||
      responseJson.portraitkey === undefined
    ) {
      responseJson.portraitkey = this.state.imgUri;
    }
    this.setState({
      // isLoading: false,
      result: responseJson,
    });
  }
  componentDidMount() {
    this.getInfo();
  }

  render() {
    // if (this.state.isLoading) {
    //   return (
    //     <View style={{flex: 1, padding: 20}}>
    //       <ActivityIndicator />
    //     </View>
    //   );
    // }
    return (
      <ScrollView style={{backgroundColor: '#F3F7FA'}}>
        <TopPicture uri={this.state.result.portraitkey} />
        <View style={{height: 20, backgroundColor: '#ffffff', marginTop: -2}} />
        <View style={styles.infoTextContainer}>
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>用户名</Text>
            <Text style={styles.valueFont}>{this.state.result.nickname}</Text>
          </View>
          <Line />
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>用户ID</Text>
            <Text style={styles.valueFont}>{this.state.result.uid}</Text>
          </View>
          <Line />
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>用户级别</Text>
            <Text style={styles.valueFont}>{this.state.result.role}</Text>
          </View>
          <Line />
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>用户类型</Text>
            <Text style={styles.valueFont}>个人</Text>
          </View>
        </View>
        <View style={styles.IntroductionTextContainer}>
          <Text style={[styles.keyFont, {marginLeft: 30, marginTop: 10}]}>
            简介
          </Text>
          <View style={styles.introductionContentContainer}>
            <Text style={styles.introductionContent} numberOfLines={5}>
              {this.state.result.remark}
            </Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  infoTextContainer: {
    width: 375,
    height: 168,
    marginTop: 0,
    backgroundColor: '#ffffff',
  },
  infoMatch: {
    marginLeft: 30,
    flexDirection: 'row',
    marginTop: 15,
  },
  IntroductionTextContainer: {
    width: 375,
    height: 200,
    marginTop: 15,
    backgroundColor: '#ffffff',
  },
  editButton: {
    marginTop: 20,
    width: 375 - 40,
    marginLeft: 20,
    marginBottom: 50,
  },
  keyFont: {
    width: 80,
    color: '#656565',
    fontSize: 15,
  },
  valueFont: {
    marginLeft: 50,
    color: '#989898',
  },
  introductionContentContainer: {
    marginTop: 10,
    width: 375 - 50,
    height: 150,
    backgroundColor: '#F8F6F9',
    marginLeft: 25,
  },
  introductionContent: {
    marginTop: 10,
    width: 375 - 60,
    marginLeft: 9,
    fontSize: 15,
    color: '#989898',
  },
});
